import React, { useEffect, useState } from "react";
import { Tabs } from "antd";
import axios from "axios";
import { Card, Col, Row } from "antd";
import { useNavigate } from "react-router-dom";
function Index() {
  const onChange = (key) => {
    console.log(key);
  };
  const items = [
    {
      key: "1",
      label: "推荐",
      children: "推荐您看的",
    },
    {
      key: "2",
      label: "最新",
      children: "最新的",
    },
  ];
  const [list, setList] = useState([]);
  const getData = async () => {
    const res = await axios.get("/api/article/list");
    console.log(res);
    setList(res.data.rows);
  };
  useEffect(() => {
    getData();
  }, []);
  const naviagte=useNavigate()
  const dian=(id)=>{
    naviagte(`/home/user/${id}`,{state:id})
  }
  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <div>
       
        <Row gutter={16}>
          {list.map((v, i) => {
            return (
              <Col span={12} onClick={()=>dian(v.id)}>
                <Card title={v.content} variant="borderless" key={i}>
                 <p>{v.title}</p>
                 <p>{v.viewCount}</p>
                 <p>{v.updatedAt}</p>
                </Card>
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
}

export default Index;
